<template>
  <PageHeaderWrapper>
    <template #extra>
      <div class="extra-actions">
        <span>保存草稿</span>
        <span>指定签署位置</span>
        <el-button type="primary">发起</el-button>
      </div>
    </template>
    <div class="container">
      <el-form ref="form" :model="formData" :rules="rules" label-width="120px" label-position="left" status-icon>
        <el-card class="form-card">
          <el-form-item label="业务分类" prop="category">
            <TagRadio v-model:value="formData.category" :options="categoryOptions" />
          </el-form-item>
          <el-form-item label="主题" prop="title">
            <el-input v-model:value="formData.title" placeholder="点击输入主题，如：人事合同" class="input-no-border" />
          </el-form-item>
        </el-card>

        <el-card class="form-card">
          <el-form-item label="业务分类" prop="category">
            <el-input v-model="formData.category" />
          </el-form-item>
        </el-card>



        <el-card class="form-card">
          <el-form-item label="签署截至日期" prop="signTime">

            <el-date-picker v-model="formData.signTime" type="datetime" placeholder="选择日期" />
          </el-form-item>
          <el-form-item label="文件终止日期" prop="endTime">
            <el-date-picker v-model="formData.endTime" type="datetime" placeholder="选择日期" />
          </el-form-item>
          <el-form-item label="水印" prop="category">
            <el-input v-model="formData.mark" placeholder="点击输入主题，如：人事合同" class="input-no-border" />
          </el-form-item>
          <el-form-item label="添加标签" prop="tags">
            <TagList v-model:value="formData.tags" placeholder="未设置" />
          </el-form-item>
          <el-form-item label="添加备注" prop="tags">
            <el-input v-model="formData.comment" autosize class="input-no-border"
              type="textarea" placeholder="添加备注，最多300字 （非必填）" :maxlength="300" />
          </el-form-item>
        </el-card>

      </el-form>
    </div>
  </PageHeaderWrapper>

</template>


<script lang="ts" setup>
import { FormRules } from "element-plus";
import { reactive, defineComponent, DefineComponent, ref } from "vue";
import PageHeaderWrapper from '@/components/PageHeaderWrapper.vue'
import TagRadio, { TagRadioOptions } from './components/TagRadio'
import TagList from './components/TagList'


defineComponent<DefineComponent>({
  PageHeaderWrapper,
  TagRadio,
  TagList
})


const rules = reactive<FormRules>({
  category: [{ required: true, message: "请选择业务分类", trigger: "blur" }],
  signTime: [{ required: true, message: "请选择签署截至日期", trigger: "blur" }],
});


const categoryOptions = ref<TagRadioOptions>([
  {
    label: '默认业务分类',
    value: 'DEFAULT'
  },
  {
    label: '默认业务分类1',
    value: 'DEFAULT1'
  }
]);

// 如果有接口 这里会用接口类型
const formData = reactive({
  category: "DEFAULT",
  title: "",
  fileList: [],
  extraFileList: [],
  mode: 'SINGLE',
  copyTo: [],
  signTime: new Date(),
  endTime: '',
  mark: '',
  tags: [],
  comment: ''
});
</script>

<style lang="less" scoped>
.extra-actions>span {
  font-size: 16px;
  color: #2d5368;
  margin-right: 15px;
  cursor: pointer;
}

.form-card {
  margin-bottom: 18px;
  padding: 30px 25px;
  /deep/ .el-form-item__label::before{
    margin-left: -10px;
  }
  .input-no-border {
    // width: 500px;

    & /deep/ .el-input__wrapper, & /deep/ .el-textarea__inner {
      box-shadow: none !important;
      border: none !important;
      outline: none !important;
      padding-left: 0;
      padding-right: 0;
    }
  }
}
</style>